<template>
	<view class="page-container back-grey-light">
		<!-- 轮播图 -->
		<u-swiper :list="swipers" :height="windowHeight*0.38*2" interval="5000" @click="clickBannerCate"></u-swiper>
		
		<!-- 商家列表 -->
		<view v-if="list.length" class="prow-base mt-base">
			<view	v-for="(item, index) in list" :key="index" class="back-white radius-l pall-base merchant-item mb-base" @click="goMerchant(item.userId)">
				<image class="merchant-image radius-l" :src="item.icon" mode="aspectFill"></image>
				<view class="col-box sb" style="width: 100%;">
					<view class="row-box sb start title-box">
						<text class="limit2 bold">{{ item.name }}</text>
						<text v-if="!item.isColse" class="s26 bold primary center">营业中</text>
						<text v-else class="s26 bold grey-light center">打烊中</text>
					</view>
					<view class="row-box">
						<text class="s24 orange mr-base"><text class="s24 orange bold">5.0</text>分</text>
						<text class="s24 grey-dark mr-base">起送¥{{ moneyFormat(item.givePrice, 2) }}</text>
						<text class="s24 grey-dark">45分钟</text>
					</view>
					<text class="s24 grey-dark">营业时间：{{ item.beginTime }}-{{ item.endTime }}</text>
				</view>
			</view>
			<u-loadmore :status="loadStatus" />
		</view>
		<view v-else class="col-box center pcol-lg">
			<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			<text class="s24 grey-light">还没有商家入驻~</text>
		</view>
		
		<!-- 自定义tabbar -->
		<!-- <u-tabbar :list="tabbar" :mid-button="true" active-color="#1BBBAF" inactive-color="#333333"
			:border-top="false" icon-size="54" mid-button-size="94" height="62px" :before-switch="beforeChangeTab">
		</u-tabbar> -->
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				windowHeight: 0, // 窗口可用高度
				swipers: [], // 轮播图数组
				list: [],
				loadStatus: 'loadmore',  // 加载状态
				pageSize: 10, // 每页数据量
				pageIndex: 1, // 第几页
				pageCount: 0, // 总页数
			}
		},
		computed: {
			...mapState('m_page', ['tabbar', 'publishCates']),
			...mapState('m_user', ['userId']),
		},
		onLoad() {
			// 窗口可用高度
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			// 获取轮播图广告
			this.getAdvertisement()
			// 获取数据列表
			this.getList(0)
		},
		onShow() {
			// 设置底部tabbar消息角标
			this.setBadge()
		},
		onPullDownRefresh() {
			this.getList(0)
		},
		onReachBottom() {
			this.getList(1)
		},
		methods: {
			...mapMutations('m_page', ['updateBeforeChangeTab']),
			...mapMutations('m_user', ['updateBackPraise']),
			
			// 跳转店铺详情
			goMerchant(userId) {
				uni.navigateTo({
					url: `/pages/subPackage/merchant/detail/detail?userId=${userId}`
				})
			},
			
			// 判断类别获取不同列表数据
			getList(condition) { // 获取情况condition 0刷新 1增加
				if (condition == 0) {
					this.pageIndex = 1
				} else if (this.pageIndex >= this.pageCount) {
					return this.loadStatus = 'nomore'
				} else {
					this.pageIndex += 1
				}
				this.loadStatus = 'loading'
				this.$api.GetMerchantList({
					current: this.pageIndex,
					limit: this.pageSize
				}).then(res => {
					console.log('GetMerchantList-success', res)
					if(res.data.code == 200) {
						// 请求成功后
						if (this.pageIndex == 1) {
							this.list = res.data.data.records
							this.pageCount = res.data.data.pages
						} else {
							this.list = [...this.list, ...res.data.data.records]
						}
						if (this.pageIndex < this.pageCount) {
							this.loadStatus = 'loadmore'
						} else {
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetMerchantList-fail', err)
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			
			// 点击轮播图跳转
			clickBannerCate(index) {
				let item = this.swipers[index]
				// 	关联类型，
				switch (item.relateType){
					case 6:
						if (!item.relateId) return
						uni.navigateTo({
							url: `/pages/subPackage/post/post_image/post_image?id=${item.relateId}`
						})
						break;
					// case 4:
					// 	uni.navigateTo({
					// 		url: `/pages/subPackage/pet/shop_detail/shop_detail?id=${item.relateId}`
					// 	})
					// 	break;
					case 7:
						if (!item.relateId) return
						uni.navigateTo({
							url: `/pages/subPackage/post/post_video/post_video?id=${item.relateId}`
						})
						break;
					// case 8:
					// 	this.gotoWeb(item.url)
					// 	break;
					default:
						return false
						break;
				}
			},
			// 获取轮播图广告
			getAdvertisement() {
				this.$api.GetAdvertisement({
					type: 1
				}).then(res => {
					console.log('GetAdvertisement-success', res)
					if (res.data.code == 200) {
						this.swipers = res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetAdvertisement-fail', err)
					
				}).finally(() => {
					
				})
			},
		}
	}
</script>

<style lang="scss">
	// 商家项
	.merchant-item {
		display: grid;
		grid-template-columns: 160rpx 1fr;
		column-gap: $uni-spacing-row-base;
		
		.merchant-image {
			display: block;
			width: 160rpx;
			height: 160rpx;
		}
		
		.title-box {
			display: grid;
			grid-template-columns: 1fr 88rpx;
			column-gap: $uni-spacing-row-base;
		}
	}
</style>
